<template>
	<div class="adminMain" v-loading="load.load">
		<template v-if="info">
			<div class="smallH3" :style="{ marginTop: '0' }">
				安卓/网页可选套餐
				<span @click=''>添加套餐</span>
			</div>
			<el-table :data="[{}]" border>
				<el-table-column prop="id" label="ID" width="150">
					<template slot-scope="scope">
						{{ scope.row.id !== undefined ? scope.row.id : "-" }}
					</template>
				</el-table-column>
				<el-table-column prop="" label="套餐名">
					<template slot-scope="scope">
						<el-input v-model="scope.row.title"></el-input>
					</template>
				</el-table-column>
				<el-table-column prop="" label="描述">
					<template slot-scope="scope">
						<el-input v-model="scope.row.intro"></el-input>
					</template>
				</el-table-column>
				<el-table-column prop="" label="时间(天)">
					<template slot-scope="scope">
						<el-input v-model="scope.row.plan_day"></el-input>
					</template>
				</el-table-column>
				<el-table-column prop="" label="价格(元)">
					<template slot-scope="scope">
						<el-input v-model="scope.row.price"></el-input>
					</template>
				</el-table-column>
				<el-table-column prop="" label="排序">
					<template slot-scope="scope">
						<el-input v-model="scope.row.sort"></el-input>
					</template>
				</el-table-column>
				<el-table-column prop="" label="是否为挽留套餐">
					<template slot-scope="scope">
						<el-switch v-model="scope.row.is_detainment"></el-switch>
					</template>
				</el-table-column>
				<el-table-column prop="" label="状态">
					<template slot-scope="scope">
						<el-switch v-model="scope.row.status"></el-switch>
					</template>
				</el-table-column>
				<el-table-column prop="user" label="操作">
					<template slot-scope="scope">
						<div class="tableBtn">
							<a @click="savePricePacks(scope.row)">{{ scope.row.id !== undefined ? "保存" : "新增" }}</a>
							<el-popconfirm title="确定删除吗？" @confirm="deletePrivePacks(index, i, scope.$index)">
								<a slot="reference" style="color:#999;">删除</a>
							</el-popconfirm>
						</div>
					</template>
				</el-table-column>
			</el-table>
			
			<div class="smallH3" :style="{ marginTop: '60px' }">
				苹果可选套餐
				<span @click=''>添加套餐</span>
			</div>
			<el-table :data="[{}]" border>
				<el-table-column prop="id" label="ID" width="150">
					<template slot-scope="scope">
						{{ scope.row.id !== undefined ? scope.row.id : "-" }}
					</template>
				</el-table-column>
				<el-table-column prop="" label="苹果套餐ID">
					<template slot-scope="scope">
						<el-input v-model="scope.row.apple_plan_id"></el-input>
					</template>
				</el-table-column>
				<el-table-column prop="" label="套餐名">
					<template slot-scope="scope">
						<el-input v-model="scope.row.title"></el-input>
					</template>
				</el-table-column>
				<el-table-column prop="" label="描述">
					<template slot-scope="scope">
						<el-input v-model="scope.row.intro"></el-input>
					</template>
				</el-table-column>
				<el-table-column prop="" label="时间">
					<template slot-scope="scope">
						<el-input v-model="scope.row.plan_day"></el-input>
					</template>
				</el-table-column>
				<el-table-column prop="" label="价格(元)">
					<template slot-scope="scope">
						<el-input v-model="scope.row.price"></el-input>
					</template>
				</el-table-column>
				<el-table-column prop="" label="排序">
					<template slot-scope="scope">
						<el-input v-model="scope.row.sort"></el-input>
					</template>
				</el-table-column>
				<el-table-column prop="" label="是否为挽留套餐">
					<template slot-scope="scope">
						<el-switch v-model="scope.row.is_detainment"></el-switch>
					</template>
				</el-table-column>
				<el-table-column prop="" label="是否优惠" width="245">
					<template slot-scope="scope">
						<div class="offFlex flex">
							<el-switch class="el-switch" v-model="scope.row.is_off_plan"></el-switch>
							<el-input class="el-input" v-model="scope.row.off_price" placeholder="元" style="width: 60px;flex:inherit;" v-if="scope.row.is_off_plan"></el-input>
							<el-input class="el-input" v-model="scope.row.off_title" placeholder="优惠标题" style="margin-left: 10px;" v-if="scope.row.is_off_plan"></el-input>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="" label="是否为自动续费">
					<template slot-scope="scope">
						<el-switch v-model="scope.row.is_auto_renew"></el-switch>
					</template>
				</el-table-column>
				<el-table-column prop="" label="状态">
					<template slot-scope="scope">
						<el-switch v-model="scope.row.status"></el-switch>
					</template>
				</el-table-column>
				<el-table-column prop="user" label="操作">
					<template slot-scope="scope">
						<div class="tableBtn">
							<a @click="savePricePacks(scope.row)">{{ scope.row.id !== undefined ? "保存" : "新增" }}</a>
							<el-popconfirm title="确定删除吗？" @confirm="deletePrivePacks(index, i, scope.$index)">
								<a slot="reference" style="color:#999;">删除</a>
							</el-popconfirm>
						</div>
					</template>
				</el-table-column>
			</el-table>
		</template>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				
				// 是否处于加载中
				load: { load: false },
				
				// 基本数据
				info: null,
				
			};
		},
		methods: {
			
			// 获取配置
			getData() {
				let _this = this;
				_this.info = {}
				return;
				
				_this.app.ajax({
					url: "/admin/vipConfig/index",
					load: _this.load,
					method: "POST",
					success(res) {
						_this.info = res.data;
					}
				});
			},
			
			// 删除某个价格套餐
			deletePrivePacks(levelIndex, systemIndex, priceIndex){
				let _this = this;
				let id = _this.info.plans[levelIndex].plans[systemIndex].plans[priceIndex].id;
				if(id){
					_this.app.ajax({
						url: "/admin/vipPlans/del",
						load: _this.load,
						method: "POST",
						data: { id },
						success(res) {
							_this.getData();
							_this.$notify({title: "提示",message: res.msg, type: "success"});
						}
					});
				}else{
					_this.info.plans[levelIndex].plans[systemIndex].plans.splice(priceIndex, 1);
				}
			},
			
			// 保存或新增某个价格套餐
			savePricePacks(item){
				let _this = this;
				_this.app.ajax({
					url: "/admin/vipPlans/update",
					load: _this.load,
					data: item,
					method: "POST",
					success(res) {
						_this.getData();
						_this.$notify({title: "提示",message: res.msg, type: "success"});
					}
				});
			},
			
		},
		mounted() {
			this.getData();
		}
	};
</script>

<style lang="scss" scoped>
	.adminMain{
		min-height: 500px;
		.h3{
			line-height: 30px;
			font-size: 17px;
			font-weight: 300;
			margin-bottom: 13px;
			span{
				font-size: 15px;
				margin-left: 25px;
				color: $background;
				cursor: pointer;
				vertical-align: middle;
				display: inline-block;
				margin-top: -2px;
			}
		}
		.smallH3{
			line-height: 30px;
			font-size: 15px;
			font-weight: 300;
			margin-bottom: 13px;
			span{
				margin-left: 25px;
				color: $background;
				cursor: pointer;
				font-size: 14px;
			}
		}
		.avatar-uploader {
			>>>.el-upload {
				$width: 40px;
				display: block;
				width: $width;
				height: $width;
				.avatar-uploader-icon {
					font-size: 18px;
					border: 1px dashed #d9d9d9;
					border-radius: 4px;
					color: #8c939d;
					width: $width;
					height: $width;
					line-height: $width - 2px;
					text-align: center;
					display: block;
				}
				.avatar {
					width: $width;
					height: $width;
					display: block;
					border-radius: 4px;
				}
			}
		}
		.offFlex{
			flex-direction: row;
			align-items: center;
			.el-switch{
				flex-shrink: 0;
			}
			.el-input{
				margin-left: 15px;
				flex: 1;
				width: 0;
			}
		}
	}
</style>